<!DOCTYPE html>
<html>
<head>
  <title>接口说明文档【${app.name}】</title>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="libary/css/default.css" type="text/css" >
  <link rel="stylesheet" href="libary/css/element_plus.1.0.2.css" type="text/css" />
    <script src="libary/vue/vue.global.js"></script>
    <script src="libary/vue/element_plus.1.0.2.js"></script>
    <script src="libary/vue/utils.js"></script>
</head>
<body>
  <div id="app">
     <el-container>
     <el-aside>
     <div  style="width:300px;border-right: 1px solid #ddd;background-color: #fafafa;display: flex;flex-direction: column;position: fixed;bottom: 0px;left: 0px;top: 0px;">
     <div style="flex: none;line-height: 55px;padding: 0 12px;border-bottom: 1px solid #ddd;"><b>${app.note}</b></div>
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
        <div style="flex: auto;overflow: hidden;position: relative;">
            <div style="position: absolute;top: 0px;bottom: 0px;right: 0px;left: 0px;overflow-y: auto">
                <el-tree :data="menuData" :props="menuDefaultProps" @node-click="handleNodeClick" :filter-node-method="filterNode" ref="tree" node-key="apiId" :highlight-current="true" style="background-color: #fafafa;"></el-tree>
            </div>
        </div>
        <div style="flex: none;line-height: 55px;padding: 0 12px;border-top: 1px solid #ddd;">@acmen.com</div>
     </div>
     </el-aside>
    <el-main style="position: fixed;right: 0px;bottom: 0px;top: 0px;left: 300px;padding:0px;">
      <iframe :src="iframeSrc" style="width:100%;border:0px;height: 99%;" ref="iframe"></iframe>
     <el-backtop target=".el-main"></el-backtop>
    </el-main>
    </el-container>
  </div>
</body>
<script>
    //const axios = require('axios');
    var menuData=JSON.parse('${menuTree}').childrens;
    var urlPre='./html/';
    const App ={
      el: '#app',
      data: function() {
        return {
                   menuData: menuData,
                   menuDefaultProps: {
                     children: 'childrens',
                     label: 'name',
                   },
                   filterText: '',
                   iframeSrc:''
               };
      },
      methods: {
          handleNodeClick(data) {
            if(data.apiId!=undefined){
                this.iframeSrc=urlPre+data.apiId+'.html';
            }else if(data.url!=undefined){
                this.iframeSrc = data.url;
            }
          },
          filterNode(value, data,node) {
               if (!value) return true;
                 value=value.replace(/^\s*|\s*$/g,"")
                 let _array = [];//这里使用数组存储 只是为了存储值。
                 this.getReturnNode(node,_array,value);
                 let result = false;
                 _array.forEach((item)=>{
                   result = result || item;
                 });
                 return result;
          },
          getReturnNode(node,_array,value){
            let isPass = node.data &&  ((node.data.name && node.data.name.indexOf(value) !== -1)||(node.data.path && node.data.path.indexOf(value) !== -1));
            isPass?_array.push(isPass):'';
            this.index++;
            if(!isPass && node.level!=1 && node.parent){
             this.getReturnNode(node.parent,_array,value);
            }
           }
      },
      watch: {
            filterText(val) {
              this.$refs.tree.filter(val);
            }
      }
    };
    const app = Vue.createApp(App);
          app.use(ElementPlus);
          app.mount("#app");
  </script>
</html>
